<template>
  <view class="login">
    <view class="top">
      <view class="login1">登录</view>
      <view class="login2">欢迎来到宠物服务上门</view>
    </view>
    <view class="userlogin">
      <view class="userlogin1">
        <uv-input placeholder="请输入您的手机号" customStyle="border:none;padding: 2%;" v-model="change1"></uv-input>
      </view>
      <view class="userlogin1">
        <uv-input placeholder="请输入您的密码" customStyle="border:none;padding: 2%;" v-model="change2"></uv-input>
      </view>
      <view class="determine">
        <uv-button type="primary" color="#008c8c" shape="circle" text="确定" @click="denglu"></uv-button>
      </view>
      <view class="all">
        <view class="left" @click="goPassword">忘记密码</view>
        <view class="right" @click="goRegistered">新用户注册</view>
      </view>
    </view>
  </view>
</template>

<script setup>
  import {
    ref
  } from 'vue';

  import {
    uniRequest
  } from "../../utils/request.js"
  const change1 = ref('17852488120')
  const change2 = ref('123123')
  // 登录接口 
  const denglu = (() => {
    const mobile = change1.value
    const password = change2.value
    console.log('123',mobile,password)
    uniRequest('login/login?server=1', function(err, data) {
      if (err) {
        // 错误
        console.log(err)
      } else {
        console.log('"成功了"', data.token)
        const token = data.token
        uni.setStorageSync('token', token)
        uni.showToast({
          title: '登录成功', // 提示文字
          duration: 2000, // 显示时间，单位ms，默认2秒
          icon: 'success',
        })
        uni.switchTab({
          url: '/pages/index/index'
        })
      }
    }, 'POST', {
      mobile: mobile,
      password: password
    });
  })
  // 跳转
  const goRegistered = (() => {
    // console.log(e);
    uni.navigateTo({
      url: '/pages/registered/registered'
    })
  })
  const goPassword = (() => {
    // console.log(e);
    uni.navigateTo({
      url: '/pages/password/password'
    })
  })
  
</script>

<style lang="scss">
  .login {
    width: 100%;
    background: linear-gradient(to bottom, #e6f8f6, #fbfefd);
    height: 100vh;
    position: relative;

    .top {
      padding-top: 20%;
      width: 90%;
      margin: auto;
      text-align: left;

      .login1 {
        font-size: 1.5rem;
        font-weight: bold;
      }

      .login2 {
        margin-top: 20rpx;
        font-size: 24rpx;
      }
    }

    /* 用户登录 */
    .userlogin {
      width: 90%;
      margin: auto;
      margin-top: 100rpx;

      background-color: #fff;
      border-radius: 30rpx;
      padding: 3%;

      .userlogin1 {
        width: 100%;
        margin-top: 40rpx;
        border-radius: 100rpx;
        height: 80rpx;
        line-height: 80rpx;
        color: #fff;
        text-align: center;
        background-color: #f7f8fa;
      }

      .determine {
        margin-top: 100rpx;
      }

      .all {
        margin-top: 30rpx;
        display: flex;
        justify-content: space-between;

        .left {
          color: #c3c3c3;

        }

        .right {
          color: #008c8c;
        }
      }
    }

    .photo {
      position: absolute;
      width: 30%;
      left: 35%;
      bottom: 5%;
      height: 100rpx;
      display: flex;
      flex-wrap: wrap;


      image {

        width: 50%;
        margin-left: 50rpx;
        height: 80%;
      }

      .color1 {
        width: 100%;
        margin-top: 10rpx;
        text-align: center;
      }
    }
  }
</style>